<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Users</title>
<link rel="stylesheet" type="text/css" href="resources/css/style.css" />
<link rel="stylesheet" type="text/css" href="resources/bootstrap/css/bootstrap.css" />

<script type="text/javascript" src="resources/js/list.js"></script>

</head>
<body>
	<jsp:include page="parts/navigation.jsp"></jsp:include>




	<div id="usersTable" style="color: red">
		<table class="table fa fa-table">
			<thead>
				<tr>
					<th class="sort" data-sort="fname">First Name</th>
					<th class="sort" data-sort="lname">Last Name</th>
					<th class="sort" data-sort="role">Role</th>
					<th class="sort" data-sort="birthday">Birthday</th>
					<th class="sort" data-sort="sex">Sex</th>
					<th class="sort" data-sort="login">Login</th>
					<th class="sort" data-sort="email">Email</th>
					<th class="sort" data-sort="status">Confirmation status</th>

					<th colspan="2"><input type="text" class="search" placeholder="Search user" /></th>
				</tr>
			</thead>
			<tbody class="list" id="listBody">
				<c:forEach var="u" items="${users}" varStatus="i">
					<c:if test="${u.id != user.id }">
						<tr id = ${u.id}>
							<td class="id" style="display: none;">${u.id}</td>
							<td class="fname">${u.fName}</td>
							<td class="lname">${u.lName}</td>
							
							<c:choose>
								<c:when test="${u.roleId == 1 }">
									<td class="role">Administrator</td>
								</c:when>
								<c:when test="${u.roleId == 2 }">
									<td class="role">Manager</td>
								</c:when>
								<c:when test="${u.roleId == 3 }">
									<td class="role">User</td>
								</c:when>
								<c:when test="${u.roleId == 4 }">
									<td class="role">Researcher</td>
								</c:when>
							</c:choose>
													
							<td class="birthday">${u.birthday}</td>
							<td class="sex">${u.sex}</td>
							<td class="login">${u.login}</td>
							<td class="email">${u.email}</td>
							<td class="status">${u.confirmationStatus}</td>
							<td class="edit"><span id="change" class="glyphicon glyphicon-retweet" data-toggle="modal" data-target="#changeRoleModal" "></span></td>
							<td class="remove"><span class="remove-item-btn glyphicon glyphicon-remove" onclick="removeUser(${u.id});"></span></td>
						</tr>
					</c:if>
				</c:forEach>



			</tbody>
		</table>
	</div>

	<div class="modal fade" id="changeRoleModal" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
		<div class="modal-dialog" style="text-align: center;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="false">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">
						Select new role for <span id="userLoginForChangeRole"></span>
					</h4>

				</div>
				<div class="modal-body">

					<div class="box-content">
						<div class="row form-group">
							<div class="col-sm-12">
								<select class="form-control" id="newRole">
									<option value="1">Administrator</option>
									<option value="2">Manager</option>
									<option value="3">User</option>
									<option value="4">Researcher</option>
								</select>
							</div>
						</div>
					</div>

				</div>
				<div class="modal-footer">
					<button id="saveNewRole" type="button" class="btn btn-primary ata-toggle="modal" data-target="#changeRoleModal"">Save changes</button>
					<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>


	<script type="text/javascript" src="resources/js/table.js"></script>


</body>
</html>